<template>
  <div class="m-input-container">
    <van-field
      v-if="!isDetail"
      v-model="fieldModel"
      type="text"
      :name="options.name"
      :label="options.label"
      :disabled="options.disabled"
      :readonly="options.readonly"
      :placeholder="options.placeholder"
      :clearable="options.clearable"
      :maxlength="options.maxlength || undefined"
      :show-word-limit="options.showWordLimit"
      :required="options.required"
      :label-width="options.labelPosition === 'top' ? '100%' : undefined"
      :label-align="options.labelPosition || undefined"
      :input-align="options.inputAlign || undefined"
      autocomplete="off"
    >
      <template v-if="options.append" #button>
        <div>{{ options.append }}</div>
      </template>
    </van-field>
    <div v-else class="m-detail-content">
      {{ fieldModel }}
      <span v-if="options.append" class="append">{{ options.append }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import defaultProps from '../props'

const name = 'm-input'
Symbol(name)

export default defineComponent({
  name,
  props: defaultProps,
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const isDetail = computed(() => props.options.permission > 0)
    const fieldModel = computed({
      get() {
        if (isDetail.value && !props.modelValue) {
          return '--'
        }
        return props.modelValue as string
      },
      set(val: string) {
        emit('update:modelValue', val)
      }
    })

    return {
      fieldModel,
      isDetail
    }
  }
})
</script>
